import React, { useEffect, useState } from "react";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { Button, Form, Input } from "antd";
import { useDispatch, useSelector } from 'react-redux'
// import { login } from "../api/login";
import { login } from "@/api/login.ts";
import { useNavigate } from 'react-router-dom';
import axios, { type AxiosResponse } from "axios";
import { setToken, setUserId } from '../store/modules/user'

const App: React.FC = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch()
  const [form] = Form.useForm();
  const [clientReady, setClientReady] = useState<boolean>(false);
  let token1 = useSelector((state: any) => state.user.token);
  useEffect(() => {
    console.log(token1);
  }, [token1]); 
  // To disable submit button at the beginning.
  useEffect(() => {
    setClientReady(true);
  }, []);
  // useEffect(() => {
  //   dispatch(fetchChannlList())
  // }, [dispatch])
  const onFinish = async (values: any) => {
    console.log("Finish:", values);
     login({username:values.username, password:values.password,user_id: 0,}).then((res)=>{
      
      if(res.code === 200) {
        console.log(res)
        localStorage.setItem('react_token', res.data.access_token); 
        navigate('/'); 
      }
     })
    // console.log(res)
    // axios
    //   .post("http://172.16.1.118:7861/nmwlogin", {
    //     username: values.username,
    //     password: values.password,
    //     user_id: 0,
    //   })
    //   .then(function (res) {
    //     console.log(res);
    //     dispatch(setToken(res.data.data.access_token))
    //     dispatch(setUserId(res.data.data.userId))
    //     console.log(res.data.data.access_token)
    //     localStorage.setItem('token', res.data.data.access_token); 
    //     // let token = useSelector((state: any) => state.token); // 从 Redux 中获取 token
    //     // let userId = useSelector((state: any) => state.userId); // 从 Redux 中获取 token
    //     // userId = res.data.userId;
    //     // token = res.data.access_token;
    //     // window.location.reload()
        
    //     // setToken(this.token)
    //     // this.getInfo().then(() => {
    //     //   window.location.reload()
    //     // })
    //   })
    //   .catch(function (error) {
    //     console.log(error);
    //   });
    // console.log(res)
    // if(res.code === 200) {
    //   let token = useSelector((state:any) => state.token); // 从 Redux 中获取 token
    //   let userId = useSelector((state:any) => state.userId); // 从 Redux 中获取 token
    //   userId = res.data.userId
    //   token = res.data.access_token
    //   // setToken(this.token)
    //   // this.getInfo().then(() => {
    //   //   window.location.reload()
    //   // })
    // }
    // else {
    //   // window.$message?.error(res.msg)
    //   console.log(res.msg)
    // }
  };

  return (
    
    <Form
      form={form}
      name="horizontal_login"
      layout="inline"
      onFinish={onFinish}
    >
       
      <Form.Item
        name="username"
        rules={[{ required: true, message: "Please input your username!" }]}
      >
        <Input prefix={<UserOutlined />} placeholder="Username" />
      </Form.Item>
      <Form.Item
        name="password"
        rules={[{ required: true, message: "Please input your password!" }]}
      >
        <Input
          prefix={<LockOutlined />}
          type="password"
          placeholder="Password"
        />
      </Form.Item>
      <Form.Item shouldUpdate>
        {() => (
          <Button
            type="primary"
            htmlType="submit"
            disabled={
              !clientReady ||
              !form.isFieldsTouched(true) ||
              !!form.getFieldsError().filter(({ errors }) => errors.length)
                .length
            }
          >
            Log in
          </Button>
        )}
      </Form.Item>
    </Form>
   
  );
};

export default App;


